import React, {Component} from 'react';
import {withRouter} from "react-router-dom"
import {Modal} from "antd"
import LinkButton from "../link-button";
import "./index.less"
import logo from "../../assets/images/logo.png"
import {formateDate} from "../../utils/dateUtils";
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";
import menuList from "../../config/menuConfig";
import {reqWeather} from "../../api";

class Header extends Component {
    state = {
        currentTime:formateDate(Date.now()),
        weather:"" // 天气的文本
    }

    getTime = ()=>{
      this.timer =  setInterval(()=>{
            const currentTime = formateDate(Date.now())
            this.setState({currentTime})
        },1000)
    }
    getWeather =  async ()=>{
        const res = await reqWeather()
        const {text_day} = res.data.result.forecasts[0]
        this.setState({weather:text_day})
    }

    getTitle = ()=>{
        const path = this.props.location.pathname
        let title
        menuList.forEach(item=>{
            if(item.key === path){// 如果当前item对象的key与path一样,item的title就是需要显示的title
                title = item.title
            }else if(item.children){ // 如果有children则再要遍历children的每一项
            const cItem =  item.children.find(cItem=>cItem.key === path)

                if(cItem){// 有值才说明是匹配的
                    // 取出cItem的title
                    title = cItem.title
                }
            }
        })

        return title


    }
    // 退出登录
    logout = ()=>{
        Modal.confirm({
            content:'确认退出吗?',
            okText:'确认',
            cancelText:'取消',
            onOk:()=>{
                console.log('this',this)
                // 把内存中的user和localstorage的user全部移除
                storageUtils.removeUser()
                memoryUtils.user = {}
                // 跳转到登录页面
                this.props.history.replace('/login')

            }

        })
    }
    /*
      第一次render()之后执行一次
      一般在此执行异步操作: 发ajax请求/启动定时器
   */
    componentDidMount(){
        // 获取当前时间
        this.getTime()
        // 获取当前天气
        this.getWeather()

    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    render() {
        const {currentTime,weather} = this.state
        const {username} = memoryUtils.user
        const title = this.getTitle()

        return (
            <div className="header">
               <div className="header-top">
                   <span>欢迎,{username}</span>
                   <LinkButton onClick={this.logout}>退出</LinkButton>
               </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">{title}</div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <img src={logo} alt="weather"/>
                        <span>{weather}</span>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Header);
